<!-- 粒子效果 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML烟花效果</title>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var particles = [];
function createParticle() {
var particle = {
x: canvas.width / 2,
y: canvas.height / 2,
xv: Math.random() * 10 - 5,
yv: Math.random() * 10 - 5,
color: "hsl(" + Math.random() * 360 + ", 100%, 50%)",
size: Math.random() * 10
};
particles.push(particle);
}
function updateParticle(particle) {
particle.x += particle.xv;
particle.y += particle.yv;
particle.size *= 0.95;
}
function drawParticle(particle) {
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fillStyle = particle.color;
ctx.fill();
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
createParticle();
for (var i = 0; i< particles.length; i++) {
var particle = particles[i];
updateParticle(particle);
drawParticle(particle);
if (particle.size< 1) {
particles.splice(i, 1);
i--;
}
}
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>